<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        window.onload = function () {
            let jsonStr = '{"name":"张三","age":18}'
            let jsonObject = JSON.parse(jsonStr)
            console.log("打印属性值",jsonObject.name,jsonObject.age)

            console.log("json对象转换成json字符串", JSON.stringify(jsonObject))
        }
    </script>
    <style>
        .msg{
            color: #f23030;
        }
    </style>
</head>
<body>
<!--<form action="/webDemo/register" method="post">-->
<!--&lt;!&ndash;    urlCode  &ndash;&gt;-->
<!--    <label>昵称</label><input name="user" placeholder="请输入名称"/><br/>-->
<!--    <label>邮箱</label><input name="email" placeholder="请输入邮箱" type="email" /><br/>-->
<!--    <label>密码</label><input name="psd" placeholder="请输入密码" type="password"/><br/>-->
<!--    <label>请再次输入密码</label><input  placeholder="请再次输入密码" type="password" /><br/>-->

<!--    <button type="submit">注册</button>-->
<!--</form>-->

<!-- 使用ajax 传递json的方式 -->
<label>昵称</label><input class="user" name="user" placeholder="请输入名称"/><br/>
<label>邮箱</label><input class="email" name="email" placeholder="请输入邮箱" type="email" /><br/>
<label>密码</label><input class="psd" name="psd" placeholder="请输入密码" type="password"/><br/>
<label>请再次输入密码</label><input  class="psd2" placeholder="请再次输入密码" type="password" /><br/>
<div>验证码<input type="number" placeholder="请输入邮箱中验证码"/><button class="reTryEmail">重试</button></div>
<button onclick="register()">注册</button>
<button onclick="registerAxios()">axios注册</button>
<div class="msg"></div>
<script>
    function jsonToUrlParam(json) {
        return Object.keys(json).map(key => key + '=' + json[key]).join('&');
    }

    function register(){
        //    使用 ajax 提交注册的数据
        let user = document.querySelector(".user").value;
        let email = document.querySelector(".email").value;
        let psd = document.querySelector(".psd").value;
        let psd2 = document.querySelector(".psd2").value;
        if (user && email && psd && psd2 && psd === psd2){
            // 提交 urlEncode 格式的数据
            // let xhr = new XMLHttpRequest();
            // xhr.open("POST", "/webDemo/register")
            // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');
            // xhr.onreadystatechange = function () {
            //     if (this.readyState === 4) {
            //         if (this.status >= 200 && this.status < 300) {
            //             console.log("注册成功",this.responseText);
            //             // 注册成功， 跳转到登录页面
            //             window.location.href = "/webDemo/sub/login.html"
            //         }else {
            //             console.log(this.status, this.responseText);
            //         }
            //     }
            // }
            // // 使用 urlEncode 的编码方式传递数据
            // let params = {
            //     user: user,
            //     email: email,
            //     psd: psd
            // }
            // xhr.send(jsonToUrlParam(params))

            // 提交 json 格式的数据
            let xhr = new XMLHttpRequest();
            xhr.open("POST", "/webDemo/register")
            xhr.setRequestHeader('Content-Type','application/json;charset=UTF-8');
            xhr.onreadystatechange = function () {
                if (this.readyState === 4) {
                    if (this.status >= 200 && this.status < 300) {
                        console.log("注册成功",this.responseText);
                        // 注册成功， 跳转到登录页面
                        window.location.href = "/webDemo/sub/login.html"
                    }else {
                        console.log(this.status, this.responseText);
                    }
                }
            }
            // 使用 urlEncode 的编码方式传递数据
            let params = {
                user: user,
                email: email,
                psd: psd
            }
            xhr.send(JSON.stringify(params))
        }else {
            alert("请输入表单内容")
        }
    }

    function registerAxios(){
        let user = document.querySelector(".user").value;
        let email = document.querySelector(".email").value;
        let psd = document.querySelector(".psd").value;
        let psd2 = document.querySelector(".psd2").value;
        if (user && email && psd && psd2 && psd === psd2){
            let params = {
                user: user,
                email: email,
                psd: psd
            }
            axios.post('/webDemo/servlet/register', params)
                .then(function (response) {
                    console.log("注册成功axios", response.data);
                    let data = response.data;
                    if (data.code === 200){
                        document.querySelector(".msg").innerHTML = data.msg
                        setTimeout(function () {
                            window.location.href = "/webDemo/sub/login.html"
                        }, 1000)
                    }else if (data.code === 205){
                        // 已经注册过了
                        // 控制 标签 给用户提示
                        document.querySelector(".msg").innerHTML = data.msg
                    }else if (data.code === 300){
                        // 注册失败
                        // 控制 标签 给用户提示
                        document.querySelector(".msg").innerHTML = data.msg
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    }
</script>
</body>
</html>